<template>
  <div class="as-localnav-frist">
    <div class="as-localnav-sceond">
      <!-- 第一个div -->
      <!-- 那铲平选购 -->
      <div class="column small-12 large-3">
        <div class="as-localnav-browsealllistcontainer">
          <div>按产品选购</div>
          <ul>
            <li><a href="">Mac</a></li>
            <li><a href="">iPad</a></li>
            <li><a href="">iPhone</a></li>
            <li><a href="">Music</a></li>
            <li><a href="">所有产品</a></li>
          </ul>
        </div>
      </div>
      <div class="column large-9 small-12">
        <div class="as-localnav-browsealllistcontainer">
          <div>按类别选购</div>
          <ul>
            <!-- 进行v—for遍历数组 -->
            <li v-for="(item, index) in classfiy" :key="index">
              <a href="#">{{ item }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classfiy: [
        "AirTag 及配件",
        "Apple Watch 表带",
        "Apple 独家提供",
        "HomeKit",
        "MagSafe",
        "保护壳及保护装备",
        "创造力",
        "存储",
        "打印机与扫描仪",
        "电源与线缆",
        "耳机与扬声器",
        "辅助功能",
        "健康与运动",
        "来自 Apple 的配件",
        "软件",
        "摄影",
        "鼠标和键盘",
        "网状 Wi-Fi 网络",
        "无线充电器",
        "显示屏与支架",
        "新增配件",
        "游戏与玩具",
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.as-localnav-frist {
  height: 100%;
  width: 100%;
  padding-top: 58px;
  background-color: #ffffff;
  .as-localnav-sceond {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 980px;
    height: 333px;
    margin: auto;
    margin-bottom: 54px;
    padding-top: 26px;
    // 设置公共样式
    .column {
      .as-localnav-browsealllistcontainer {
        div {
          text-align: left;
          color: black;
          font-weight: 600;
          height: 20px;
          font-size: 14px;
        }
        ul {
          margin: 5px 0 -5px -10px;
          padding: 8px 0 5px 10px;
          list-style: none;
          li {
            height: 34px;
            text-align: left;
            a {
              font-size: 13px;
              text-decoration: none;
              color: #1d1d1f;
            }
            a:hover {
              color: #003f7e;
            }
          }
        }
      }
    }
    .large-3 {
      width: 25%;
      height: 307px;
      flex-basis: 25%;
      max-width: 25%;
      .as-localnav-browsealllistcontainer {
        width: 100%;
        height: 205px;
      }
    }
    .large-9 {
      width: 75%;
      height: 307px;
      flex-basis: 75%;
      max-width: 75%;
      .as-localnav-browsealllistcontainer {
        // 这里不能将宽度固定不变
        border-left: 1px solid #d2d2d7;
        margin-left: -3.26%;
        padding-left: 3.26%;
        ul {
          height: 285px !important;
          li {
            display: block;
            width: 244px !important;
            float: left !important;
            padding-right: 15px;
          }
        }
      }
    }
  }
}
</style>